<template>
	<n-button
		class="w-full h-[52px] no-select flex justify-center items-center bg-[#7864FF] text-[#fff] app-font-bold rounded-md text-[16px] mt-16 f-style b-shadow"
		@click="debounceHandleClick"
		type="primary"
		:disabled="isDisabled || stoping || (isRuning && type !== 'auto')"
		:class="
			isDisabled || stoping || (isRuning && type !== 'auto') ? 'opacity-50' : 'cursor-pointer'
		">
		<template v-if="type === 'auto'">
			<!-- <BaseLoadingSmallIcon v-if="isRuning" :size="20" /> -->
			<span class="mr-1" v-if="stopIcon && isRuning">
				<base-icon :name="stopIcon" :size="20" />
			</span>
			<span>
				{{
					stoping
						? $t('miniGames.StopInProgress')
						: isRuning
							? $t('miniGames.stopAutoBet')
							: $t('miniGames.autoBet')
				}}
			</span>
		</template>
		<template v-else>
			<span v-if="!isRuning || !stopIcon || isDisabled">{{ $t('transactionType.bet') }}</span>
			<base-icon v-else :name="stopIcon" :size="20" />
			<!-- <BaseLoadingSmallIcon v-else :size="20" /> -->
		</template>
	</n-button>
</template>
<script lang="ts" setup>
// import { BaseLoadingSmallIcon, BaseIcon } from '@/components/base'
import { BaseIcon } from '@/components/base'
import { debounce } from 'lodash-es'
import { NButton } from 'naive-ui'

const props = defineProps({
	isRuning: {
		type: Boolean,
		default: false
	},
	type: {
		type: String,
		default: ''
	},
	isDisabled: {
		type: Boolean,
		default: false
	},
	stopIcon: {
		type: String,
		default: ''
	},
	debounceTime: {
		default: 500
	},
	stoping: {
		type: Boolean,
		default: false
	}
})

const emit = defineEmits(['handleClick'])
const handleClick = () => {
	if (props.isDisabled || props.stoping || (props.isRuning && props.type !== 'auto')) {
		return
	}

	emit('handleClick')
}
const debounceHandleClick = debounce(() => handleClick(), props.debounceTime)
</script>
<style scoped>
.mt-16 {
	margin-top: 16px;
}
.f-style {
	font-weight: 600;
	color: white !important;
	&:hover {
		color: white;
	}
}
.b-shadow {
	box-shadow:
		0 1px 3px 0 rgba(0, 0, 0, 0.2),
		0 1px 2px 0 rgba(0, 0, 0, 0.12);
}
/* 防止文本选择 */
.no-select {
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}
</style>
